<template>
  <div class="p16">
    <div class="p16-center" @click="isIframe"></div>
    <div
      v-if="showIframe"
      class="iframe"
      draggable="true"
      :style="{'top':iframePosition.top+'px','left':iframePosition.left+'px'}"
      v-clickoutside="closeIframe"
    >
      <div>
        <iframe
          width="4200px"
          height="1050px"
          src="http://10.208.121.11/tempo/publish/show/2e9b5b5668fb441fb1419a0782586a27/3d135166cb3e42c6aec1feb3cab60134"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import clickoutside from "../../assets/directives/clickoutside.js";
import { mapState } from "vuex";
import WOW from "wow.js";
export default {
  name: "P16",
  computed: {
    ...mapState(["videoUrl"])
  },
  created() {
    new WOW().init();
  },
  mounted() {
    document.addEventListener("keyup", this.changePage);
  },
  data() {
    return {
      six1Muted: true,
      showIframe: false,
      iframePosition: {
        top: 0,
        left: -700
      }
    };
  },
  methods: {
    changePage(e) {
      //右键
      if (e.keyCode == 40 || e.keyCode == 34) {
        this.$router.replace(`/ppt/p17`);
      }
      //左键
      if (e.keyCode == 38 || e.keyCode == 33) {
        this.$router.replace(`/ppt/p15`);
      }
    },
    isIframe(e) {
      this.showIframe = !this.showIframe;
      e.stopPropagation();
    },
    closeIframe(e) {
      this.showIframe = false;
      e.stopPropagation();
    }
  },
  directives: { clickoutside },
  beforeDestroy() {
    document.removeEventListener("keyup", this.changePage);
  },
  watch: {
    $route: {
      handler(n, v) {
        document.addEventListener("keyup", this.changePage);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p16 {
  background-image: url("../../assets/images/pptScreen/pFirst/16.png");
  position: relative;
}
.p16-center {
  position: absolute;
  width: 1532px;
  height: 279px;
  top: 605px;
  left: 1091px;
  cursor: pointer;
}
.iframe {
  width: 4250px;
  position: absolute;
  z-index: 999;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
</style>